<template>
	<view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
		<image
			v-if="!isError"
			:src="src"
			:mode="mode"
			@error="onErrorHandler"
			@load="onLoadHandler"
			:lazy-load="lazyLoad"
			class="u-image__image"
			:show-menu-by-longpress="showMenuByLongpress"
			:style="{
				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
			}"
		></image>
		<view
			v-if="showLoading && loading"
			class="u-image__loading"
			:style="{
				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius),
				backgroundColor: this.bgColor
			}"
		>
			<slot v-if="$slots.loading" name="loading" />
			<u-icon v-else :name="loadingIcon" :width="width" :height="height"></u-icon>
		</view>
		<view
			v-if="showError && isError && !loading"
			class="u-image__error"
			:style="{
				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
			}"
		>
			<slot v-if="$slots.error" name="error" />
			<u-icon v-else :name="errorIcon" :width="width" :height="height"></u-icon>
		</view>
	</view>
</template>

<script>

export default {
	name: 'u-image',
	props: {
		
		src: {
			type: String,
			default: ''
		},
		
		mode: {
			type: String,
			default: 'aspectFill'
		},
		
		width: {
			type: [String, Number],
			default: '100%'
		},
		
		height: {
			type: [String, Number],
			default: 'auto'
		},
		
		shape: {
			type: String,
			default: 'square'
		},
		
		borderRadius: {
			type: [String, Number],
			default: 0
		},
		
		lazyLoad: {
			type: Boolean,
			default: true
		},
		
		showMenuByLongpress: {
			type: Boolean,
			default: true
		},
		
		loadingIcon: {
			type: String,
			default: 'photo'
		},
		
		errorIcon: {
			type: String,
			default: 'error-circle'
		},
		
		showLoading: {
			type: Boolean,
			default: true
		},
		
		showError: {
			type: Boolean,
			default: true
		},
		
		fade: {
			type: Boolean,
			default: true
		},
		
		webp: {
			type: Boolean,
			default: false
		},
		
		duration: {
			type: [String, Number],
			default: 500
		},
		
		bgColor: {
			type: String,
			default: '#f3f4f6'
		}
	},
	data() {
		return {
			
			isError: false,
			
			loading: true,
			
			opacity: 1,
			
			durationTime: this.duration,
			
			backgroundStyle: {}
		};
	},
	watch: {
		src: {
			immediate: true,
			handler (n) {
				if(!n) {
					
					this.isError = true;
					this.loading = false;
				} else {
					this.isError = false;
				}
			}
		}
	},
	computed: {
		wrapStyle() {
			let style = {};
			
			style.width = this.$u.addUnit(this.width);
			style.height = this.$u.addUnit(this.height);
			
			style.borderRadius = this.shape == 'circle' ? '50%' : this.$u.addUnit(this.borderRadius);
			
			style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible';
			if (this.fade) {
				style.opacity = this.opacity;
				style.transition = `opacity ${Number(this.durationTime) / 1000}s ease-in-out`;
			}
			return style;
		}
	},
	methods: {
		
		onClick() {
			this.$emit('click');
		},
		
		onErrorHandler(err) {
			this.loading = false;
			this.isError = true;
			this.$emit('error', err);
		},
		
		onLoadHandler() {
			this.loading = false;
			this.isError = false;
			this.$emit('load');
			
			
			if (!this.fade) return this.removeBgColor();
			
			this.opacity = 0;
			
			
			this.durationTime = 0;
			
			setTimeout(() => {
				this.durationTime = this.duration;
				this.opacity = 1;
				setTimeout(() => {
					this.removeBgColor();
				}, this.durationTime);
			}, 50);
		},
		
		removeBgColor() {
			
			this.backgroundStyle = {
				backgroundColor: 'transparent'
			};
		}
	}
};
</script>

<style scoped lang="scss">
@import '../../libs/css/style.components.scss';

.u-image {
	position: relative;
	transition: opacity 0.5s ease-in-out;

	&__image {
		width: 100%;
		height: 100%;
	}

	&__loading,
	&__error {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		@include vue-flex;
		align-items: center;
		justify-content: center;
		background-color: $u-bg-color;
		color: $u-tips-color;
		font-size: 46rpx;
	}
}
</style>
